21. How do you decode or encode a URL in JavaScript?

In JavaScript, you can encode and decode a URL using the following built-in functions:

Encoding a URL:

1. encodeURI(): Encodes a full URL but does not encode special characters like :, /, ?, &, =, etc.

   javascript
   CopyEdit
   let url = "https://example.com/search?query=hello world";
   let encodedUrl = encodeURI(url);
   console.log(encodedUrl);
   // Output: https://example.com/search?query=hello%20world
   

2. encodeURIComponent(): Encodes a URL component (query parameters, path segments). It encodes special characters like :, /, ?, &, =, etc.

   javascript
   CopyEdit
   let param = "hello world!";
   let encodedParam = encodeURIComponent(param);
   console.log(encodedParam);
   // Output: hello%20world%21
   

Decoding a URL:

1. decodeURI(): Decodes a full URL encoded with encodeURI().

   javascript
   CopyEdit
   let decodedUrl = decodeURI(encodedUrl);
   console.log(decodedUrl);
   // Output: https://example.com/search?query=hello world
   

2. decodeURIComponent(): Decodes a URL component encoded with encodeURIComponent().

   javascript
   CopyEdit
   let decodedParam = decodeURIComponent(encodedParam);
   console.log(decodedParam);
   // Output: hello world!
   

When to Use Which?

• Use encodeURI / decodeURI when handling an entire URL.
• Use encodeURIComponent / decodeURIComponent when encoding or decoding query parameters or specific parts of a URL.

Example with Query Parameters

javascript
CopyEdit
let baseUrl = "https://example.com/search";
let query = "hello world!";
let encodedQuery = encodeURIComponent(query);
let fullUrl = `${baseUrl}?q=${encodedQuery}`;
console.log(fullUrl); 
// Output: https://example.com/search?q=hello%20world%21

let decodedQuery = decodeURIComponent(encodedQuery);
console.log(decodedQuery); 
// Output: hello world!

Would you like a real-world use case, such as working with URLSearchParams? 🚀